import Taro from '@tarojs/taro';
import { View, Image, Text } from '@tarojs/components';
import { AtModal, AtModalContent, AtModalHeader, AtTextarea } from "taro-ui"

import http from '@/utils/http';
import utils from '@/utils/util';
import './index.scss'
import { get as getGlobalData } from '@/global'
import MedicinecabinetItem from '@/components/medicinecabinetItem/index';
import Survey from '@/components/survey/index'

let app = Taro.getApp();
export default class MedicalkitDetails extends Taro.Component {
    constructor() {
        super()
        this.state = {
            medicalkitDetails: {},
            isOpen: false,
            mark: '',
            picturesArr: []
        }
    }
    componentWillMount() {
        let medicalkitDetails = this.$router.params;
        if (medicalkitDetails.pics) {
            medicalkitDetails.pics = medicalkitDetails.pics.split('|')
        }
        this.setState({
            medicalkitDetails: medicalkitDetails
        })
    }
    config = {
        navigationBarTitleText: '药箱详情'
    }
    handleChange(e) {
        this.setState({
            mark: e.detail.value.replace(/\s+/g, '')
        })
    }
    uploadImg() {
        let { picturesArr } = this.state;
        utils.uploadImg().then((res) => {
            picturesArr.push(res);
            this.setState({
                picturesArr
            })
        })
    }
    recycling() { // 确认回收
        let userInfo = getGlobalData('userInfo') || utils.getUserInfo();
        const { medicalkitDetails, picturesArr, mark } = this.state;
        http.get('sendMedicalkitRequest', {
            medicalkitid: medicalkitDetails.id,
            loginid: userInfo.loginid,
            pics: picturesArr.join('|'),
            mark
        }).then((res) => {
            utils.showtoast('申请回收成功', null, null, true);
            setTimeout(() => {
                Taro.navigateBack();
            }, 1000)
        })
    }
    previewImage(picturesArr, item) {
        app.previewImage(picturesArr, item);
    }
    render() {
        let { medicalkitDetails, isOpen, mark, picturesArr} = this.state;
        return (
            <View className='pl-2-5 pt-2-5 pr-2-5 medicalkit-details'>
                <MedicinecabinetItem medicalkit={medicalkitDetails} isTap={false}></MedicinecabinetItem>
                <Survey entranceType={1} medicalkit={medicalkitDetails}
                  renderSolt={
                        <View>
                          {medicalkitDetails.status != 0 && medicalkitDetails.status != 3?
                                <View>
                                    <View className='mt-3-5'>
                                      {!isOpen && <AtTextarea
                                        value={mark}
                                        placeholderClass='ft24 ft_B9C'
                                        onChange={this.handleChange.bind(this)}
                                        maxLength={200}
                                        placeholder='请填写备注信息'
                                      />
                                        }
                                    </View>
                                    <View className='mt-4'>附件：</View>
                                    <View className='pictures-arr flex flex-r mt-3-5' >
                                        {
                                            picturesArr.map((item) => {
                                                return (
                                                    <View className='pictures-arr-item flex bdr_10' key={item}>
                                                        <View className='ov-h flex-1 bdr_10' onClick={() => { this.previewImage(picturesArr, item)}}>
                                                            <Image src={item} mode='center' className='pictures-box'></Image>
                                                        </View>
                                                    </View>
                                                )
                                            })
                                        }
                                        {
                                            picturesArr.length < 3 ?
                                                <View className='pictures-arr-item flex flex-item-center flex-c bdr_10' onClick={() => { this.uploadImg() }} >
                                                    <Image className='camera' src={require('../../assets/imgs/drug/plus.png')}></Image>
                                                    <Text className='mt-2 ft24 fc_999'>添加附件</Text>
                                                </View>
                                                : null
                                        }

                                    </View>
                                    <View onClick={() => { this.setState({ isOpen: true }) }} className='default-btn rest-btn ft32 fc_FFF text-c' >回收</View>
                                </View> : <View className='mt-3-5'>
                                  {medicalkitDetails.status == 3 && <View className='fc_65C pb-6'>
                                        <View className='mb-4 word-all'>
                                            备注：{medicalkitDetails.mark}
                                        </View>
                                        <View className='mb-4'>附件:</View>
                                        {medicalkitDetails.pics && <View className='medicalkit-details-picture flex flex-r'>
                                            {
                                                medicalkitDetails.pics.map((item) => {
                                                    return (
                                                        <View key={item} className='imgs' onClick={() => { this.previewImage(medicalkitDetails.pics, item)}} >
                                                            <Image className='pictures-img' mode='center' src={item}></Image>
                                                        </View>
                                                    )
                                                })
                                            }
                                        </View>
                                        }
                                    </View>}
                                </View>}
                        </View>
                    }
                ></Survey>
                <AtModal isOpened={isOpen} >
                    <AtModalHeader><View className='ft_600 text-c line-b pt-2-5 pb-2-5'>温馨提示</View></AtModalHeader>
                    <AtModalContent>
                        <View className='pb-5'>
                            <View className='mb-0-5'>回收药品箱：{medicalkitDetails.MedicalkitID}</View>
                            <View className='mb-0-5'>存放位置：{medicalkitDetails.wardname}</View>
                            <View className='word-all'>备注：{mark}</View>
                            {picturesArr.length && <View>附件：{picturesArr.length}</View>}
                        </View>
                        <View className='flex flex-r flex-item-between'>
                            <View
                              className='pt-1-5 pb-1-5 pl-6-5 pr-6-5 borer-ov bdr_10 fc_65C de-btn'
                              onClick={() => { this.setState({ isOpen: false }) }}
                            >取消</View>
                            <View
                              className='bg_1FF pt-1-5 pb-1-5 pl-6-5 pr-6-5 bdr_10 fc_FFF de-btn'
                              onClick={() => { this.recycling() }}
                            >确认</View>
                        </View>
                    </AtModalContent>
                </AtModal>
            </View>
        )
    }
}